<template>
  <div class="signed-agent-change-view">

    <el-dialog
      v-model="dialogVisible"
      title="变更代理商信息"
      width="900px"
      :before-close="handleClose"
    >

      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formData"
        :rules="rules"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-row>

          <el-col :span="12">
            <el-form-item label="代理商编号">
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="代理商名称"
              prop="agentName"
            >
              <el-input
                v-model="formData.agentName"
                placeholder="请输入代理商名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="统一社会信用代码"
              prop="creditCode"
            >
              <el-input
                v-model="formData.creditCode"
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="代理商级别"
              prop="agentLevel"
            >
              <el-select
                v-model="formData.agentLevel"
                placeholder="请选择代理商级别"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="企业所在地区"
              prop="area"
            >
              <el-cascader
                ref="cascader"
                v-model="formData.area"
                :popper-append-to-body="false"
                :options="citys"
                :props="props1"
                placeholder="请选择地区"
                clearable
                @change="areaChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="详细地址"
              prop="address"
            >

              <el-input
                v-model="formData.address"
                placeholder="请输入详细地址"
                clearable
              />

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="联系人"
              prop="userName"
            >

              <el-input
                v-model="formData.userName"
                placeholder="请输入联系人"
                clearable
              />

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="联系电话"
              prop="tel"
            >

              <el-input
                v-model="formData.tel"
                placeholder="请输入联系电话"
                clearable
              />

            </el-form-item>
          </el-col>

          <el-col :span="24">

            <el-form-item label="附件">

              <div style="display: flex">
                <filesUploadView
                  ref="refFile"
                  :list="formData.businessLicenseFiles"
                />

                <!--                                <image-upload-view v-for="(item,index) in formData.businessLicenseFiles" :ref="(el) => { setImageRef(el,index)}" is-toast :data="item" :key="index"></image-upload-view>-->
              </div>

            </el-form-item>

          </el-col>

        </el-row>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogConfirm"
          >提交审核</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import area from '@/utils/area.js'
import {defineComponent, inject, onBeforeMount, reactive, ref} from 'vue'
import {crmStore} from '@CRM/store'

export default defineComponent({
  name: 'SignedAgentChangeView',
  setup(props, contaxt) {
    var dialogVisible = ref(false)
    var files = ref(null)
    var ruleForm = ref(null)
    var refFile = ref(null)
    const api = inject('api')
    const citys = area
    const props1 = reactive({
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })
    const options = crmStore.getters['dictionary/getDictionary']['agent_level']

    var images = ref([])

    onBeforeMount(() => {
      if (
        crmStore.getters['jsonData/getJsonData'] &&
        crmStore.getters['jsonData/getJsonData']['agent_qualification']
      ) {
        files.value =
          crmStore.getters['jsonData/getJsonData']['agent_qualification']
            .data || []
      }
    })

    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号'))
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    const rules = ref({
      agentName: [
        {
          required: true,
          message: '请输入代理商名称',
          trigger: 'blur',
        },
      ],
      creditCode: [
        {
          required: true,
          message: '请输入统一社会信用代码',
          trigger: 'blur',
        },
      ],
      area: [
        {
          required: true,
          message: '请选择地址',
          trigger: 'change',
        },
      ],
      address: [
        {
          required: true,
          message: '请输入详细地址',
          trigger: 'blur',
        },
      ],
      userName: [
        {
          required: true,
          message: '请输入联系人',
          trigger: 'blur',
        },
      ],
      tel: [
        {
          required: true,
          validator: checkPhone,
          trigger: 'blur',
        },
      ],
      agentLevel: [
        {
          required: true,
          message: '请选择代理商级别',
          trigger: 'change',
        },
      ],
    })
    var formData = ref({})

    const openDialog = (data) => {
      formData.value = JSON.parse(JSON.stringify(data))
      // formData.value.businessLicenseFiles[0].isNeed = true
      formData.value.area = [data.provinceCode, data.cityCode, data.areaCode]

      dialogVisible.value = true
    }

    const handleClose = () => {
      ruleForm.value.resetFields()
      setTimeout(() => {
        ruleForm.value.clearValidate()
        dialogVisible.value = false
      }, 100)
    }

    const dialogConfirm = () => {
      ruleForm.value.validate((val) => {
        if (val) {
          console.log('验证通过')
          // for (let key in images.value){
          //     if (!images.value[key].validateImage())
          //     {
          //         return
          //     }
          // }

          if (!refFile.value.validateFiles()) {
            return
          }
          // formData.value.businessLicenseFiles = files;
          api.signedAgent
            .AGENT_OPENED_ACCOUNT_EDIT(formData.value)
            .then((res) => {
              if (!res.code) {
                contaxt.emit('success')

                handleClose()
              }
            })
        }
      })
    }

    const areaChange = (val) => {
      console.log(val)
      if (val[0]) {
        formData.value.provinceCode = val[0]
      }
      if (val[1]) {
        formData.value.cityCode = val[1]
      }
      if (val[2]) {
        formData.value.areaCode = val[2]
      }
    }

    const setImageRef = (el, index) => {
      images.value[index] = el
    }

    return {
      citys,
      dialogVisible,
      formData,
      rules,
      options,
      props1,
      images,
      ruleForm,
      files,
      refFile,

      handleClose,
      dialogConfirm,
      areaChange,
      openDialog,
      setImageRef,
    }
  },
})
</script>

<style lang="scss">
.signed-agent-change-view {
  .el-form {
    .el-form-item {
      width: 100%;
      .el-input {
        width: 100%;
      }
      .el-cascader {
        width: 100%;
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
